<template>
	<view class="container">
		<!-- 头像和用户名部分 -->
		<view class="header">
			<image class="avatar" src="/static/ico_head.png"></image>
			<view class="user-info">
				<view class="username">
					<text>{{name}}</text>
					<!-- <image class="tag" src="@/static/切图 8.png"></image> -->
				</view>
				<text class="organization">{{schoolName}}</text>
			</view>
		</view>

		<!-- 教务中心 -->
		<view class="section">
			<view class="section-title">教务中心</view>
			<view class="section-content">
				<view class="grid">
					<view class="grid-item" v-for="(item, index) in listItems" :key="index">
						<navigator class="grid-nav" :url="item.url">
							<image class="icon" :src="item.icon"></image>							
							<text class="grid-label">{{ item.label }}</text>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		

		<!-- 其他 -->
		<view class="section">
			<view class="section-title">其他</view>
			<view class="section-content">
				<view class="grid">
					<view class="grid-item">
						<navigator class="grid-nav" @click="handleUnsupport">
							<image class="icon" src="@/static/切图 9.png"></image>
							<text class="grid-label">设置</text>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				schoolName: "",
				listItems: [{
					type: 1,
					url: '/pages/clue/clue',
					icon: '/static/切图 1.png',
					label: '线索管理'
				},{
					type: 1,
					url: '/ppages/follow/follow',
					icon: '/static/切图 2.png',
					label: '今日待跟进',
				},{
					type: 1,
					url: '/pages/trail/trail',
					icon: '/static/切图 3.png',
					label: '跟进管理'
				},{
					type: 3,
					url: '/pages/feesWarning/feesWarning',
					icon: '/static/切图 4.png',
					label: '续课预警'
				},{
					type: 2,
					url: '/pages/call/call',
					icon: '/static/组 464@1x.png',
					label: '点名'
				},{
					type: 2,
					url: '/pages/course/schedule/schedule',
					icon: '/static/组 467@1x.png',
					label: '课表'
				},{
					type: 2,
					url: '/pages/assignment/assignment',
					icon: '/static/组 470@1x.png',
					label: '课后作业'
				},{
					type: 3,
					url: '/pages/student/student',
					icon: '/static/切图 7.png',
					label: '学员'
				},{
					type: 2,
					url: '/pages/class/list/list',
					icon: '/static/组 478@1x.png',
					label: '班级'
				},
				],
			};
		},
		onLoad: function() {
			this.name = uni.getStorageSync("name")
			this.schoolName = uni.getStorageSync("school_name")
			let role = uni.getStorageSync("role");
			this.listItems = this.listItems.filter(it => it.type & role);
			
		},
		methods: {
			
			handleUnsupport: () => {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		margin-top: 40rpx;
		margin-left: 36rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: aqua;
		margin-right: 12rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		margin-left: 16rpx;
	}

	.username {
		display: flex;
		align-items: center;
	}

	.username text {
		font-size: 36rpx;
	}

	.tag {
		margin-left: 20rpx;
		width: 174rpx;
		height: 48rpx;
	}

	.organization {
		margin-top: 15rpx;
		font-size: 28rpx;
		font-weight: 300;
		color: #666;
	}

	.section {
		margin-top: 54rpx;
		
	}
	
	.section-title {
		width: 25%;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		text-align: center;
	}
	
	.section-content {
		
	}
	
	.grid {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.grid-item {
		width: 25%;
		margin-top: 32rpx;
	}
	
	.grid-nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.grid-label {
		/* display: block; */
		font-size: 32rpx;
		margin-top: 10rpx;
	}
	
	.icon {
		width: 48rpx;
		height: 48rpx;
		/* margin-left: 20rpx; */
	}
	
</style>